import { Component } from 'react';
import { getBanners, getGoodsTop, getGoodsList} from '@/Api/home';
import { Search,List } from 'react-vant';
import HomeSwiper from '@/components/Home/swiper'
import Menus from '@/components/Home/menus';
import TopList from '@/components/Home/topList';
import Nav from '@/components/Home/nav';
import GoodsItem from '@/components/Home/GoodsItem';
import './index.less'
import { InfiniteScroll } from 'antd-mobile'

class Home extends Component {
    state = {
        type: 1,
        page: 1,
        limit: 10,
        bannerList:[],
        topList:[],
        menus:[],
        goodsList:[],
        explosiveMoney:[],
        hasMore:true,
        isLoading:false
    }
    render() {
        let {bannerList,topList,menus,goodsList,explosiveMoney,hasMore} = this.state;
        return (
            <div className="home">
                <Search
                    shape="round"
                    background="#e93323"
                    placeholder="请输入搜索关键词"
                    disabled
                />
                <div className="bg">
                    <HomeSwiper bannerList={bannerList}/>
                </div>
                <Menus menus={menus}/>
                <TopList topList={topList}/>
                <Nav explosiveMoney={explosiveMoney} getType={(type)=>{
                    window.scrollTo(0,500)
                    this.setState({
                        page:1,
                        limit:10,
                        goodsList:[],
                        type:type,
                        hasMore:true
                    },()=>{
                        // 发送请求获取商品列表
                    this.getDataList(type,this.state.page,this.state.limit)
                    })
                    
                }}/>
                <div className='GoodsList'>
                    {
                        goodsList.map((item,index)=>{
                            return <GoodsItem key={index} item={item}></GoodsItem>
                        })
                    }
                </div>
                <InfiniteScroll loadMore={()=>this.loadMore()} hasMore={hasMore} />
            </div>
        )
    }
    async componentDidMount() {
        this.$plusReady(()=>{
            plus.navigator.setStatusBarBackground("#FF0000")
        })
        // 发送请求 获取轮播图
        let res = await getBanners();
        //  获取 商品排行榜
        let Top = await getGoodsTop();
        this.setState({
            bannerList:res.data.data.banner,
            topList:Top.data.data.splice(0,3),
            menus:res.data.data.menus,
            explosiveMoney:res.data.data.explosiveMoney
        })
        this.getDataList(this.state.type,this.state.page,this.state.limit)
    }
    async getDataList(type, page, limit) {
        let res = await getGoodsList(type, page, limit);
        if(res.data.data.list.length ===0){
            this.setState({
                hasMore:false
            })
        }
        this.setState({
            goodsList:[...this.state.goodsList,...res.data.data.list],
            isLoading:false
        });
    }
    loadMore(){
        let { type, page, limit,isLoading } = this.state;
        if(isLoading){
            return
        }
        page++;
        this.setState({
            page:page,
            isLoading:true
        })
        this.getDataList(type,page,limit)
    }
}
export default Home;